<template>
	<view class="content">
		<image class="logo" src="/static/ic_login_logo.png" />
		<view class="menu_item_div">
			<view class="et_div">
				<view class="menu_txt">手机号:</view>
				<input class="et" placeholder="请输入手机号" type="number" maxlength="15" v-model="phone"
					@input="onInput($event,1)" />
			</view>
		</view>

		<view class="menu_item_div">
			<view class="sms_div">
				<view class="menu_txt" style="margin: 0 0 0 0rpx;">验证码:</view>
				<input class="et_sms" placeholder="点击输入" type="number" maxlength="6" v-model="sms_code"
					@input="onInput($event,3)" />
				<view class="btn_get_sms" @click.stop="onGetSmsCode">{{sms_txt}}</view>
			</view>
		</view>

		<view class="picker_div">

			<view class="pker_div">
				<picker class="pker" :range="area_list" range-key="name" @change="onSelArea">
					<view>{{curr_area.name || '请选择大区'}}</view>
				</picker>
			</view>

			<view style="width: 1rpx;height: 100%;background-color: #ccc;"></view>

			<view class="pker_div">
				<picker class="pker" :range="site_list" range-key="name" @change="onSelSite">
					<view>{{curr_site.name || '请选择网点'}}</view>
				</picker>
			</view>

		</view>

		<view class="btn_ok" @click.stop="onOk">登录</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				sms_code: '',
				sms_txt: '点击获取', // 验证码按钮文案
				second: 60, // 验证码计时器
				isCountDown: false, // 是否正在倒计时

				area_list: [], // 大区列表
				site_list: [], // 网点列表
				curr_area: {}, // 记录当前选择的大区
				curr_site: {}, // 记录当前选择的网点
			}
		},

		mounted() {
			let that = this
			if (uni.getStorageSync('userinfo')) {
				console.log('登录页面检测到用户信息,跳转到首页');
				uni.switchTab({ url: '/pages/index/index' })
			}


			that.getAreaList()

		},

		methods: {

			// 选择区域
			onSelArea(e) {
				let { value: index } = e.detail
				// console.log('大区选择的索引 = ', index);
				this.curr_area = this.area_list[index]

				this.curr_site = {}
				this.site_list = []
				this.getSiteList()
			},

			// 选择区域
			onSelSite(e) {
				let { value: index } = e.detail
				console.log('网点选择的索引 = ', index);
				this.curr_site = this.site_list[index]
			},

			onInput(e, type) {
				// console.log('输入的e = ', e);
				// console.log('输入的type = ', type);
			},
			onGetSmsCode() {
				// uni.showToast({ title: '获取验证码', icon: 'none' })

				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' })
					return
				}
				if (this.isCountDown) {
					uni.showToast({ title: this.second + 's后再获取', icon: 'none' })
					return
				}
				this.reqMsg() // 请求获取验证码

			},
			onOk() {
				let that = this

				// console.log('当前选择的区域 = ', this.curr_area);
				// console.log('当前选择的网点 = ', this.curr_site);

				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' })
					return
				}
				if (!this.sms_code) {
					uni.showToast({ title: '请输入验证码', icon: 'none' })
					return
				}
				if (!this.curr_area || !this.curr_area.id) {
					uni.showToast({ title: '请选择大区', icon: 'none' })
					return
				}
				if (!this.curr_site || !this.curr_site.id) {
					uni.showToast({ title: '请选择网点', icon: 'none' })
					return
				}

				uni.showModal({
					title: '提示',
					content: '是否提交登录信息？',
					success: res => {
						if (res.confirm) {
							that.reqLogin()
						}
					}
				})
			},

			// 接口:发送验证码
			async reqMsg() {
				let that = this

				let mobile = that.phone
				let event = 'mobilelogin'
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$getSmsCode({ mobile, event })
				uni.showToast({ title: msg, icon: 'none' })
				// console.log(`reqMsg...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					// 请求验证码成功
					that.sms_txt = that.second + 's'
					let timer = setInterval(() => {
						that.second--
						if (that.second <= 0) {
							clearInterval(timer) // 取消计时器
							that.sms_txt = "点击获取"
							that.second = 60
							that.isCountDown = false
						} else {
							that.sms_txt = that.second + 's'
						}
					}, 1000)
					that.isCountDown = true
				} else {}

			},

			// 接口:验证码登录 
			async reqLogin() {
				let that = this

				let mobile = that.phone
				let captcha = that.sms_code
				let region_id = that.curr_area.id
				let site_id = that.curr_site.id
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$login({ mobile, captcha, region_id, site_id })
				// console.log(`reqLogin...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					// 登录成功
					uni.setStorageSync('userinfo', JSON.stringify(data.userinfo))
					uni.switchTab({ url: '/pages/index/index' })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}

			},

			// 接口:获取大区
			async getAreaList() {
				let that = this

				// uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$getAreaList({})
				// console.log(`getAreaList...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					that.area_list = data
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 接口:获取网点
			async getSiteList() {
				let that = this

				let id = this.curr_area.id
				uni.showLoading({ title: '处理中', mask: true, })
				let { code, msg, data } = await that.$getSiteList({ id })
				console.log(`getSiteList...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					that.site_list = data
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 160rpx;
		width: 230rpx;
		margin: 200rpx auto 100rpx auto;
	}

	.menu_item_div {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 40rpx 0 0 0;
	}

	.menu_txt {
		width: 180rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.et_div {
		display: flex;
		align-items: center;
		width: 75%;
		height: 66rpx;
		line-height: 66rpx;
		border: solid 1rpx rgba(1, 1, 1, 0.15);
		border-radius: 888rpx;
		/* background-color: white; */
	}

	.et {
		font-size: 28rpx;
	}

	.et_sms {
		/* flex-grow: 1; */
		width: 160rpx;
		font-size: 28rpx;
		/* background-color: blue; */
	}

	.sms_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: solid 1rpx rgba(1, 1, 1, 0.15);
		width: 75%;
		height: 66rpx;
		line-height: 66rpx;
		border-radius: 888rpx;
		/* background-color: white; */
	}

	.btn_get_sms {
		width: 160rpx;
		font-size: 24rpx;
		text-align: center;
		margin: 0 0rpx 0 0;
		/* background-color: red; */
	}

	.btn_ok {
		background-color: deepskyblue;
		width: 75%;
		height: 66rpx;
		line-height: 66rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 40rpx 0 0 0;
		border-radius: 888rpx;
	}

	.picker_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 75%;
		height: 66rpx;
		margin: 40rpx 0 0 0;
		border: solid 1rpx rgba(1, 1, 1, 0.15);
		border-radius: 888rpx;
		font-size: 28rpx;
	}

	.pker_div {
		display: flex;
		justify-content: space-between;
		width: 50%;
	}

	.pker {
		flex-grow: 1;
		text-align: center;
	}
</style>